@charset "UTF-8";

.#{$ns-obj}switch {
    user-select: none;
    & > input {
        position: absolute;
        clip: rect(0,0,0,0);

        &:checked + .#{$ns-obj}switch-base {
            background: $blue;
            &:before {
                transform: translateX($switch-wt - ($switch-ht - $switch-pointer-space * 2) - $switch-pointer-space * 2);
            }
        }

        &[disabled] + .#{$ns-obj}switch-base {
			background: $light-gray;
			cursor: not-allowed;
        }

        &[disabled]:checked + .#{$ns-obj}switch-base {
            background: lighten($blue, 38%);
        }
    }
}

.#{$ns-obj}switch-base {
    display: inline-block;
    width: $switch-wt;
    height: $switch-ht;

    background: $gray;
    border-radius: $switch-ht;
    transition: background .3s ease-in-out;

    &:before {  /* 移动的圆点 */
        content: '';
        display: inline-block;
        width: $switch-ht - $switch-pointer-space * 2;
        height: $switch-ht - $switch-pointer-space * 2;
        margin: $switch-pointer-space;

        background: $white;
        border-radius: 50%;
        transition: transform .3s ease-in-out;
    }
}
